<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>大转盘活动</title>

		<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>
	<body style="background:rgba(0,0,0,0.2);overflow-x:hidden;">
		<img src="images/gift_nothing.png" id="sorry-img" style="display:none;" />
		<img src="images/gift1.png" id="gift1-img" style="display:none;" />
		<img src="images/gift2.png" id="gift2-img" style="display:none;" />
		<img src="images/gift3.png" id="gift3-img" style="display:none;" />
		<img src="images/gift4.png" id="gift4-img" style="display:none;" />
		<img src="images/gift5.png" id="gift5-img" style="display:none;" />
		<img src="images/gift6.png" id="gift6-img" style="display:none;" />
		<img src="images/gift7.png" id="gift7-img" style="display:none;" />
		<img src="images/gift8.png" id="gift8-img" style="display:none;" />
		<div class="banner">
			<div class="bgbox">
			    <ul class="clearfix tab-top" id="tabcilk">
			        <li class="fl active">
						欢乐转盘
						<div class="line" style="display: block;"></div>
					</li>
			        <li class="fl">
						黄金转盘
						<div class="line"></div>
					</li>
			        <div class="fl mybag" style="float: right;">
						<img src="./images/icon_mybag.png" >
						我的背包
					</div>
					<div class="clearfix"></div>
			    </ul>
			    <div class="tabbox clearfix" id="tabbox">
			        <div class="boxlist " style="display: block;">
						<div class="turnplate">
							<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
							<img class="pointer" src="images/btn_start.png"/>
						</div>
						<div id="radio-box">
							<div class="radio-item" onclick="select('1',this)">
								<img src="./images/icon_lingyu.png" alt="">
								灵玉 x10
							</div>
							<div class="radio-item" onclick="select('2',this)">
								<img src="./images/icon_lingyu.png" alt="">
								灵玉 x100
							</div>
							<div class="radio-item" onclick="select('3',this)">
								<img src="./images/icon_lingyu.png" alt="">
								灵玉 x1000
							</div>
						</div>
						<div class="tip">点击开始即赠送主播10灵玉，并获赠1次转盘机会</div>
					</div>
			        <div class="boxlist">
						<div class="turnplate" style="background-image:url(images/bg_turntable_gold.png);">
							<canvas class="item" id="goldcanvas" width="422px" height="422px"></canvas>
							<img class="goldPointer" src="images/btn_start_gold.png"/>
						</div>
						<div id="radio-box">
							<div class="radio-item" onclick="select('1',this)">
								<img src="./images/icon_lingyu.png" alt="">
								灵玉 x10
							</div>
							<div class="radio-item" onclick="select('2',this)">
								<img src="./images/icon_lingyu.png" alt="">
								灵玉 x100
							</div>
							<div class="radio-item" onclick="select('3',this)">
								<img src="./images/icon_lingyu.png" alt="">
								灵玉 x1000
							</div>
						</div>
						<div class="tip">点击开始即赠送主播10灵玉，并获赠1次转盘机会</div>
					</div>
			    </div>
			</div>
		</div>
<!-- 中奖结果弹窗 -->
<div class="result-box" id="result" style="display: none;">
	<img src="images/icon_exit2.png" class="exit">
	<div class="result-title">
		恭喜您获得以下道具！
	</div>
	<div class="result-subheading">
		可在我的背包中查看使用
	</div>
	<div class="gift-box">
		<div class="gift-item">
			<img src="images/gift8.png" class="gift-img">
			<div class="gift-num">
				X1
			</div>
			<div class="gift-text">精品礼物</div>
		</div>
		<div class="gift-item">
			<img src="images/gift8.png" class="gift-img">
			<div class="gift-num">
				X1
			</div>
			<div class="gift-text">精品礼物</div>
		</div>
		<div class="gift-item">
			<img src="images/gift8.png" class="gift-img">
			<div class="gift-num">
				X1
			</div>
			<div class="gift-text">精品礼物</div>
		</div>
		<div class="gift-item">
			<img src="images/gift8.png" class="gift-img">
			<div class="gift-num">
				X1
			</div>
			<div class="gift-text">精品礼物</div>
		</div>
		<div class="gift-item">
			<img src="images/gift8.png" class="gift-img">
			<div class="gift-num">
				X1
			</div>
			<div class="gift-text">精品礼物</div>
		</div>
		<div class="gift-item">
			<img src="images/gift8.png" class="gift-img">
			<div class="gift-num">
				X1
			</div>
			<div class="gift-text">精品礼物</div>
		</div>
	</div>
</div>		
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>


		<script type="text/javascript">
		// 欢乐转盘
		var turnplate={
				restaraunts:[],				//大转盘奖品名称
				colors:[],					//大转盘奖品区块对应背景颜色
				outsideRadius:140,			//大转盘外圆的半径
				textRadius:150,				//大转盘奖品位置距离圆心的距离
				insideRadius:68,			//大转盘内圆的半径
				startAngle:0,				//开始角度
				randomRate:[],              //控制获奖率，百分制(相加需等于100%)，对应restaraunts(顺序需要保持一致)，
				bRotate:false				//false:停止;ture:旋转
		};
		// 黄金转盘
		var turnplategold={
				restaraunts:[],				//大转盘奖品名称
				colors:[],					//大转盘奖品区块对应背景颜色
				outsideRadius:140,			//大转盘外圆的半径
				textRadius:150,				//大转盘奖品位置距离圆心的距离
				insideRadius:68,			//大转盘内圆的半径
				startAngle:0,				//开始角度
				randomRate:[],              //控制获奖率，百分制(相加需等于100%)，对应restaraunts(顺序需要保持一致)，
				bRotate:false				//false:停止;ture:旋转
		};
		
		$(document).ready(function(){
			//动态添加大转盘的奖品与奖品区域背景颜色
			// 欢乐转盘
			turnplate.randomRate = ["50%", '50%', '0%', '0%', '0%', '0%', '0%', '0%', '0%', '0%'];  //小心设置按100%分配
			turnplate.restaraunts = ["谢谢惠顾", "比心", "豪华大奔", "豪华游艇", "黄瓜", "棒棒糖", "红色砖石", "超级跑车", "粉色佳人"];
			turnplate.colors = ["#ffffff", "#FFBDBA", "#BCF6FE", "#FFBDBA","#BCF6FE", "#FFFFFF", "#FFBDBA", "#FFD367","#BCF6FE"];
			// 黄金转盘
			turnplategold.randomRate = ["50%", '50%', '0%', '0%', '0%', '0%', '0%', '0%', '0%', '0%'];  //小心设置按100%分配
			turnplategold.restaraunts = ["谢谢惠顾", "比心", "豪华大奔", "豪华游艇", "黄瓜", "棒棒糖", "红色砖石", "超级跑车", "粉色佳人"];
			turnplategold.colors = ["#ffffff", "#FFBDBA", "#BCF6FE", "#FFBDBA","#BCF6FE", "#FFFFFF", "#FFBDBA", "#FFD367","#BCF6FE"];
		
			
			var rotateTimeOut = function (){
				$('#wheelcanvas').rotate({
					angle:0,
					animateTo:2160,
					duration:8000,
					callback:function (){
						alert('网络超时，请检查您的网络设置！');
					}
				});
			};
			var rotateTimeOut = function (){
				$('#goldcanvas').rotate({
					angle:0,
					animateTo:2160,
					duration:8000,
					callback:function (){
						alert('网络超时，请检查您的网络设置！');
					}
				});
			};
		
			//欢乐旋转转盘 item:奖品位置; txt：提示语;
			var rotateFn = function (item, txt){
				var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
				if(angles<270){
					angles = 270 - angles; 
				}else{
					angles = 360 - angles + 270;
				}
				$('#wheelcanvas').stopRotate();
				$('#wheelcanvas').rotate({
					angle:0,
					animateTo:angles+1800,
					duration:8000,
					callback:function (){
						
						var result = document.getElementById("result");
						result.style.display = "block";
						alert(txt);//欢乐转盘弹出框
						turnplate.bRotate = !turnplate.bRotate;
					}
				});
			};
			//黄金旋转转盘 item:奖品位置; txt：提示语;
			var rotategold = function (item, txt){
				var angles = item * (360 / turnplategold.restaraunts.length) - (360 / (turnplategold.restaraunts.length*2));
				if(angles<270){
					angles = 270 - angles; 
				}else{
					angles = 360 - angles + 270;
				}
				$('#goldcanvas').stopRotate();
				$('#goldcanvas').rotate({
					angle:0,
					animateTo:angles+1800,
					duration:8000,
					callback:function (){
						
						var result = document.getElementById("result");
						result.style.display = "block";
						alert(txt);//黄金转盘弹出框
						turnplategold.bRotate = !turnplategold.bRotate;
					}
				});
			};
			// 欢乐转盘
			$('.pointer').click(function (){
				if(turnplate.bRotate)return;
				turnplate.bRotate = !turnplate.bRotate;
				//获取随机数(奖品个数范围内)
				var item = rnd(turnplate.randomRate);
				//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
				rotateFn(item, turnplate.restaraunts[item-1]);
			});
			// 黄金转盘
			$('.goldPointer').click(function (){
				if(turnplategold.bRotate)return;
				turnplategold.bRotate = !turnplategold.bRotate;
				//获取随机数(奖品个数范围内)
				var item = rnd(turnplategold.randomRate);
				//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
				rotategold(item, turnplategold.restaraunts[item-1]);
			});
			
		});
		
		function rnd(rate){
			var random = Math.floor(Math.random() * 100);
			var myRandom = [];
			var randomList = [];
			var randomParent = [];
			for(var i = 0; i < 100; i++){
				myRandom.push(parseInt([i]) + 1);
			}
			for(var i = 0; i < rate.length; i++){
				var temp = [];
				var start = 0;
				var end = 0;
				randomList.push(parseInt(rate[i].split('%')[0]));
				for(var j = 0; j < randomList.length; j++){
					start += randomList[j-1] || 0
					end += randomList[j]
				}
				temp = myRandom.slice(start, end);
				randomParent.push(temp)
			}
			for(var i = 0; i < randomParent.length; i++){
				if($.inArray(random, randomParent[i]) > 0){
					return(i+1)
				}
			}
			
		}
		
		
		//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
		window.onload=function(){
			drawRouletteWheel();// 欢乐转盘
			drawRouletteGold();// 黄金转盘
		};
		// 欢乐转盘
		function drawRouletteWheel() {    
		  var canvas = document.getElementById("wheelcanvas");    
		  if (canvas.getContext) {
			  //根据奖品个数计算圆周角度
			  var arc = Math.PI / (turnplate.restaraunts.length/2);
			  var ctx = canvas.getContext("2d");
			  //在给定矩形内清空一个矩形
			  ctx.clearRect(0,0,422,422);
			  //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
			  ctx.strokeStyle = "#FFBE04";
			  //font 属性设置或返回画布上文本内容的当前字体属性
			  ctx.font = '16px Microsoft YaHei';      
			  for(var i = 0; i < turnplate.restaraunts.length; i++) {       
				  var angle = turnplate.startAngle + i * arc;
				  ctx.fillStyle = turnplate.colors[i];
				  ctx.beginPath();
				  //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
				  ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);    
				  ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
				  ctx.stroke();  
				  ctx.fill();
				  //锁画布(为了保存之前的画布状态)
				  ctx.save();   
				  
				  //----绘制奖品开始----
				  ctx.fillStyle = "#E5302F";
				  var text = turnplate.restaraunts[i];
				  var line_height = 17;
				  //translate方法重新映射画布上的 (0,0) 位置
				  ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
				  
				  //rotate方法旋转当前的绘图
				  ctx.rotate(angle + arc / 2 + Math.PI / 2);
				  
				  /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
				  if(text.indexOf("M")>0){//流量包
					  var texts = text.split("M");
					  for(var j = 0; j<texts.length; j++){
						  ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
						  if(j == 0){
							  ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
						  }else{
							  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
						  }
					  }
				  }else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围 
					  text = text.substring(0,6)+"||"+text.substring(6);
					  var texts = text.split("||");
					  for(var j = 0; j<texts.length; j++){
						  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
					  }
				  }else{
					  //在画布上绘制填色的文本。文本的默认颜色是黑色
					  //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
					  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
				  }
				  
				  //添加对应图标
				  if(text.indexOf("谢谢惠顾")>=0){
					  var img= document.getElementById("sorry-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  }; 
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("比心")>=0){
					  var img= document.getElementById("gift1-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("豪华大奔")>=0){
					  var img= document.getElementById("gift2-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("豪华游艇")>=0){
					  var img= document.getElementById("gift3-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("黄瓜")>=0){
					  var img= document.getElementById("gift4-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("棒棒糖")>=0){
					  var img= document.getElementById("gift5-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("红色砖石")>=0){
					  var img= document.getElementById("gift6-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("超级跑车")>=0){
					  var img= document.getElementById("gift7-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("粉色佳人")>=0){
					  var img= document.getElementById("gift8-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }
				  //把当前画布返回（调整）到上一个save()状态之前 
				  ctx.restore();
				  //----绘制奖品结束----
			  }     
		  } 
		}		// 黄金转盘
		function drawRouletteGold() {
		  var canvas = document.getElementById("goldcanvas");    
		  if (canvas.getContext) {
			  //根据奖品个数计算圆周角度
			  var arc = Math.PI / (turnplategold.restaraunts.length/2);
			  var ctx = canvas.getContext("2d");
			  //在给定矩形内清空一个矩形
			  ctx.clearRect(0,0,422,422);
			  //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
			  ctx.strokeStyle = "#FFBE04";
			  //font 属性设置或返回画布上文本内容的当前字体属性
			  ctx.font = '16px Microsoft YaHei';      
			  for(var i = 0; i < turnplategold.restaraunts.length; i++) {       
				  var angle = turnplategold.startAngle + i * arc;
				  ctx.fillStyle = turnplategold.colors[i];
				  ctx.beginPath();
				  //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
				  ctx.arc(211, 211, turnplategold.outsideRadius, angle, angle + arc, false);    
				  ctx.arc(211, 211, turnplategold.insideRadius, angle + arc, angle, true);
				  ctx.stroke();  
				  ctx.fill();
				  //锁画布(为了保存之前的画布状态)
				  ctx.save();   
				  
				  //----绘制奖品开始----
				  ctx.fillStyle = "#E5302F";
				  var text = turnplategold.restaraunts[i];
				  var line_height = 17;
				  //translate方法重新映射画布上的 (0,0) 位置
				  ctx.translate(211 + Math.cos(angle + arc / 2) * turnplategold.textRadius, 211 + Math.sin(angle + arc / 2) * turnplategold.textRadius);
				  
				  //rotate方法旋转当前的绘图
				  ctx.rotate(angle + arc / 2 + Math.PI / 2);
				  
				  /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
				  if(text.indexOf("M")>0){//流量包
					  var texts = text.split("M");
					  for(var j = 0; j<texts.length; j++){
						  ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
						  if(j == 0){
							  ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
						  }else{
							  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
						  }
					  }
				  }else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围 
					  text = text.substring(0,6)+"||"+text.substring(6);
					  var texts = text.split("||");
					  for(var j = 0; j<texts.length; j++){
						  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
					  }
				  }else{
					  //在画布上绘制填色的文本。文本的默认颜色是黑色
					  //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
					  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
				  }
				  
				  //添加对应图标
				  if(text.indexOf("谢谢惠顾")>=0){
					  var img= document.getElementById("sorry-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  }; 
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("比心")>=0){
					  var img= document.getElementById("gift1-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("豪华大奔")>=0){
					  var img= document.getElementById("gift2-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("豪华游艇")>=0){
					  var img= document.getElementById("gift3-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("黄瓜")>=0){
					  var img= document.getElementById("gift4-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("棒棒糖")>=0){
					  var img= document.getElementById("gift5-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("红色砖石")>=0){
					  var img= document.getElementById("gift6-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("超级跑车")>=0){
					  var img= document.getElementById("gift7-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }else if(text.indexOf("粉色佳人")>=0){
					  var img= document.getElementById("gift8-img");
					  img.onload=function(){  
						  ctx.drawImage(img,-18,25,40,40);      
					  };  
					  ctx.drawImage(img,-18,25,40,40);  
				  }
				  //把当前画布返回（调整）到上一个save()状态之前 
				  ctx.restore();
				  //----绘制奖品结束----
			  }     
		  } 
		}
			// tab切换
			var ali = document.getElementById("tabcilk").getElementsByTagName("li");
			var adiv = document.getElementById("tabbox").getElementsByClassName("boxlist");
			var aline = document.getElementsByClassName("line");

			function tab(btn, boxlist, aline) {
				for (var i = 0; i < btn.length; i++) {
					btn[i].index = i;
					btn[i].onclick = function() {
						//alert(this.index );   
						for (var j = 0; j < btn.length; j++) {
							btn[j].classList.remove("active")
							boxlist[j].style.display = "none";
							aline[j].style.display = "none";
							btn[this.index].classList.add("active");
							boxlist[this.index].style.display = "block";
							aline[this.index].style.display = "block";
						}
					}
				}
			}
			tab(ali, adiv, aline);
			// 单选
			function select(e, th) {
				if (e == 1) {
					$(th).addClass("bg1").siblings().removeClass('bg2');
					$(th).addClass("bg1").siblings().removeClass('bg3');
					console.log("点击了第一个")
				} else if (e == 2) {
					$(th).addClass("bg2").siblings().removeClass('bg1');
					$(th).addClass("bg2").siblings().removeClass('bg3');
					console.log("点击了第二个")
				} else if (e == 3) {
					$(th).addClass("bg3").siblings().removeClass('bg2');
					$(th).addClass("bg3").siblings().removeClass('bg1');
					console.log("点击了第三个")
				}
			}
			// 关闭中奖结果
			$('.exit').click(function (){
				 var result = document.getElementById("result");
				 result.style.display = "none";
			});
		</script>
	</body>
</html>
